<template>
  <div class="map-main-container">
    <el-tooltip class="page-header" effect="dark" content="返回" placement="bottom">
      <el-icon @click="$router.go(-1)" style="position:fixed; top:30px;left:30px;z-index:10000;font-size:30px;font-weight:bolder;"><el-icon-back /></el-icon> 
    </el-tooltip>
    <div id="mapContainer" class="map-container" />
  </div>
</template>

<script setup>
import {onMounted} from 'vue'
import {ElMessage} from 'element-plus'
import {asyncLoadScript} from '@/utils/utils'

const url = "https://webapi.amap.com/maps?v=1.4.7&key=c1f9b92cfc1b69e2a0b24128a23d40ca&plugin=AMap.CitySearch,AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder"

onMounted(() => {
  asyncLoadScript(url, window.AMap, (err) => {
    if (err) {
      return ElMessage.warning('加载地图失败')
    }
    initMap()
  })
})

function initMap() {
  new window.AMap.Map('mapContainer', {
    resizeEnable: true, //是否监控地图容器尺寸变化
    zoom: 12,
  })
}
</script>

<style scoped lang="scss">
.map-main-container{
  @include wh(100vw, 100vh);
  .page-header{
    position: absolute;
    top: 50px;
    left: 30px;
    z-index: 99;
  }
  .location{
    width: 100vw;
    padding: 10px;
    text-align: center;
    color: rgb(27, 195, 187);
  }
  .map-container{
    @include wh(100%, 100%);
  }
}
</style>
